<!-- 订单详情 -->
<template>
  <el-dialog
    class="gl_dialog_TitleLine gl_dl_footer"
    width="880px"
    title="订单详情"
    :visible.sync="detailDialogVisible"
    :close-on-press-escape="false"
    append-to-body
  >
    <div v-if="orderData">
      <el-scrollbar v-loading="detailLoading" wrap-class="scrollbar-wrapper gl_dialog_height">
        <Info :order-data="orderData" :detail="detail" :total-amount="TotalAmount" :pay-amount="PayAmount" />
        <div class="gl_mr_15">
          <MallOrder :detail="detail" :pay-amount="PayAmount" />
        </div>
      </el-scrollbar>
    </div>
    <div v-else class="gl_noData">
      <p>暂无数据</p>
    </div>
  </el-dialog>
</template>

<script>
import Info from '@/components/Order/info';
import MallOrder from '@/components/Order/mallOrder';
import {
  api_GET_TradeOrderDetails // 获取订单详情
} from '@/extend/api/swaggerApi/app.js';
import {
  Api_GET_TradeOrderDetailsQO
} from '@/lib/form/swaggerForm';
export default {
  name: 'OrderDetail',
  components: {
    Info,
    MallOrder
  },
  data() {
    return {
      detailDialogVisible: false,
      detailLoading: false,
      Api_GET_TradeOrderDetailsQO: new Api_GET_TradeOrderDetailsQO(),
      orderData: {}, // 订单详细
      detail: {},
      TotalAmount: 0,
      PayAmount: 0
    };
  },
  methods: {
    open(orderNo) {
      this.detailDialogVisible = true;
      this.getDetail(orderNo);
    },
    // 获取订单详情
    getDetail(orderNo) {
      var that = this;
      that.detailLoading = true;
      that.Api_GET_TradeOrderDetailsQO.OrderNo = orderNo;
      api_GET_TradeOrderDetails(that.Api_GET_TradeOrderDetailsQO).then(res => {
        that.orderData = res;
        if (res.details) {
          that.detail = JSON.parse(res.details);
          console.log(that.detail);
        }
        that.TotalAmount = that.orderData.totalPrice;
        that.PayAmount = that.orderData.payPrice;
        that.detailLoading = false;
      }).catch(() => {
        that.detailLoading = false;
        that.$message({ type: 'error', message: '获取订单详情失败！' + (error.error && error.error.message || '') });
      });
    }
  }
};
</script>
<style scoped>
</style>
